<template>
  <div class="premisstion">
    <headTool>
      <template slot="after">
        <el-button type="primary" @click="addPrem(0, 1)">添加权限</el-button>
      </template>
    </headTool>
    <!-- 树状表格 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="code" label="标识"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.type === 1"
            type="text"
            @click="addPrem(row.id, 2)"
            >添加</el-button
          >
          <el-button type="text" @click="editPerm(row.id)">编辑</el-button>
          <el-button type="text" @click="delPrem(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑权限的弹框 -->
    <el-dialog
      :title="titel"
      :visible.sync="showpremDialog"
      @close="cancelClick"
    >
      <el-form :model="permForm" label-width="120px">
        <el-form-item label="权限名称">
          <el-input v-model="permForm.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="permForm.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="permForm.description"></el-input>
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="permForm.enVisible"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelClick">取 消</el-button>
        <el-button type="primary" @click="primaryClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入
import {
  getPermissionsList,
  setPermissions,
  savePermissions,
  getPermissions,
  delPermissions
} from '@/api/permission'
// 导入树状处理函数
import { toTree } from '@/utils'
export default {
  name: 'permission',
  data () {
    return {
      tableData: [{ name: 'hah' }],
      permForm: {},
      showpremDialog: false
    }
  },
  methods: {
    // 获取权限列表
    async getPermissionsList () {
      let res = await getPermissionsList()
      this.tableData = toTree(res.data, '0')
    },

    // 根据id获取节点权限
    async addPrem (pid, type) {
      this.permForm.pid = pid
      this.permForm.type = type
      this.showpremDialog = true
    },

    // 根据id编辑节点权限
    async editPerm (id) {
      let res = await getPermissions(id)
      this.permForm = res.data
      this.showpremDialog = true
    },
    // 取消按钮
    cancelClick () {
      this.permForm = {}
      this.showpremDialog = false
    },
    // 确认按钮
    async primaryClick () {
      // 先判断,做表当验证
      // 判断是新增还是修改
      if (!this.permForm.id) {
        await savePermissions(this.permForm)
      } else {
        await setPermissions(this.permForm)
      }
      this.getPermissionsList()
      this.permForm = {}
      this.$message.success(this.titel + '成功')
      this.showpremDialog = false
    },
    // 删除权限节点
    async delPrem (id) {
      await delPermissions(id)
      this.$message.success('权限节点删除成功')
      this.getPermissionsList()
    }
  },
  created () {
    this.getPermissionsList()
  },
  computed: {
    titel () {
      return this.permForm.id ? '编辑权限' : '新增权限'
    }
  }
}
</script>

<style></style>
